<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
            .ui-filter-column .ui-column-customfilter .custom-filter {
                width: 100%;
                box-sizing: border-box;
            }
        </style>
    </ui:define>

    <ui:define name="title">
        DataTable <span class="subitem">Filter</span>
    </ui:define>

    <ui:define name="description">
        Filtering updates the data based on the constraints.
    </ui:define>

    <ui:param name="documentationLink" value="/components/datatable"/>
    <ui:param name="widgetLink" value="DataTable-1"/>

    <ui:define name="implementation">
        <div class="card">
            <h5>Column Filtering</h5>
            <h:form>
                <p:dataTable var="customer" value="#{dtFilterView.customers1}" widgetVar="customersTable"
                    emptyMessage="No customers found with given criteria"
                    filteredValue="#{dtFilterView.filteredCustomers1}"
                    globalFilterOnly="#{dtFilterView.globalFilterOnly}">

                    <f:facet name="header">
                        <div class="flex align-items-center justify-content-between">
                            <span>List of Customers</span>
                            <div>
                            <p:inputText id="globalFilter" onkeyup="PF('customersTable').filter()" style="width:10rem"
                                         placeholder="Enter keyword" />
                            <p:commandButton value="Global Filter Only" update="@form" styleClass="ml-2"
                                             action="#{dtFilterView.toggleGlobalFilter()}"/>
                            </div>
                        </div>

                    </f:facet>

                    <p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}" filterMatchMode="contains" filterPlaceholder="Filter By Name">
                        <h:outputText value="#{customer.name}" />
                    </p:column>

                    <p:column headerText="Country" sortBy="#{customer.country.name}" filterBy="#{customer.country.name}">
                        <span class="flag flag-#{customer.country.code}" style="width: 30px; height: 20px" />
                        <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.country.name}" />
                    </p:column>

                    <p:column field="representative" headerText="Representative" filterMatchMode="exact"
                        sortBy="#{customer.representative.name}">
                        <f:facet name="filter">
                            <p:selectOneMenu onchange="PF('customersTable').filter()" styleClass="ui-custom-filter">
                                <f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{dtFilterView.representatives}" />
                            </p:selectOneMenu>
                        </f:facet>

                        <p:graphicImage name="images/avatar/#{customer.representative.image}" library="demo" width="32"
                            style="vertical-align: middle" />
                        <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.representative.name}" />
                    </p:column>

                    <p:column field="date" headerText="Join Date" filterMatchMode="between">
                        <f:facet name="filter">
                            <p:datePicker selectionMode="range" onchange="PF('customersTable').filter()" converter="javax.faces.DateTime" />
                        </f:facet>
                    </p:column>

                    <p:column field="status" headerText="Status" filterMatchMode="exact">
                        <f:facet name="filter">
                            <p:selectOneMenu onchange="PF('customersTable').filter()" styleClass="ui-custom-filter">
                                <f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{dtFilterView.customerStatus}" />
                            </p:selectOneMenu>
                        </f:facet>

                        <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status.toString()}</span>
                    </p:column>

                    <p:column field="activity" headerText="Activity" sortBy="#{customer.activity}" filterMatchMode="gt"
                              converter="javax.faces.Integer">
                        <p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem" />
                    </p:column>

                </p:dataTable>
            </h:form>
        </div>
        <div class="card">
            <h5>Default Filter</h5>
            <h:form>
                <p:dataTable var="customer" value="#{dtFilterView.customers2}" widgetVar="customersTable2"
                    emptyMessage="No customers found with given criteria"
                    filteredValue="#{dtFilterView.filteredCustomers2}" filterBy="#{dtFilterView.filterBy}">

                    <f:facet name="header">
                        <span>List of Customers</span>
                    </f:facet>

                    <p:column headerText="Name" sortBy="#{customer.name}" filterBy="#{customer.name}">
                        <h:outputText value="#{customer.name}" />
                    </p:column>

                    <p:column headerText="Country" sortBy="#{customer.country.name}" filterBy="#{customer.country.name}">
                        <span class="flag flag-#{customer.country.code}" style="width: 30px; height: 20px" />
                        <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.country.name}" />
                    </p:column>

                    <p:column field="representative" headerText="Representative" filterMatchMode="exact"
                              sortBy="#{customer.representative.name}">
                        <f:facet name="filter">
                            <p:selectOneMenu onchange="PF('customersTable2').filter()" styleClass="custom-filter">
                                <f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{dtFilterView.representatives}" />
                            </p:selectOneMenu>
                        </f:facet>

                        <p:graphicImage name="images/avatar/#{customer.representative.image}" library="demo" width="32"
                                        style="vertical-align: middle" />
                        <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.representative.name}" />
                    </p:column>

                    <p:column field="date" headerText="Join Date" filterMatchMode="between">
                        <f:facet name="filter">
                            <p:datePicker selectionMode="range" onchange="PF('customersTable2').filter()" styleClass="ui-custom-filter"/>
                        </f:facet>
                    </p:column>

                    <p:column field="status" headerText="Status" filterMatchMode="exact">
                        <f:facet name="filter">
                            <p:selectOneMenu onchange="PF('customersTable2').filter()" styleClass="ui-custom-filter">
                                <f:selectItem itemLabel="All" itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{dtFilterView.customerStatus}" />
                            </p:selectOneMenu>
                        </f:facet>

                        <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status.toString()}</span>
                    </p:column>

                    <p:column field="activity" headerText="Activity" sortBy="#{customer.activity}"
                              converter="javax.faces.Integer">
                        <p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem" />
                    </p:column>
                </p:dataTable>
            </h:form>
        </div>
        <div class="card">
            <h5>Global Filter Function</h5>
            <h:form>
                <p:dataTable var="customer" value="#{dtFilterView.customers3}" widgetVar="customersTable3"
                             emptyMessage="No customers found with given criteria"
                             filteredValue="#{dtFilterView.filteredCustomers3}"
                             globalFilterFunction="#{dtFilterView.globalFilterFunction}">

                    <f:facet name="header">
                        <div class="flex justify-content-end">
                            <p:inputText id="globalFilter" onkeyup="PF('customersTable3').filter()" style="width:300px"
                                         placeholder="Search all fields using global function" />
                        </div>
                    </f:facet>

                    <p:column field="name" filterable="false"/>

                    <p:column headerText="Country" sortBy="#{customer.country.name}" >
                        <span class="flag flag-#{customer.country.code}" style="width: 30px; height: 20px" />
                        <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.country.name}" />
                    </p:column>

                    <p:column field="representative" headerText="Representative" filterable="false">
                        <p:graphicImage name="images/avatar/#{customer.representative.image}" library="demo" width="32"
                                        style="vertical-align: middle" />
                        <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.representative.name}" />
                    </p:column>

                    <p:column field="date" filterable="false"/>

                    <p:column field="status" filterable="false">
                        <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status.toString()}</span>
                    </p:column>

                    <p:column headerText="Activity" sortBy="#{customer.activity}">
                        <p:progressBar value="#{customer.activity}" displayOnly="true" style="height: .5rem" />
                    </p:column>
                </p:dataTable>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
